import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { placeholderLineDefaultProps } from './defaultProps';
import type { PlaceholderLineOptions } from './type';

export interface PlaceholderLineProps extends PlaceholderLineOptions, HTMLAttributes<HTMLDivElement> {}

const PlaceholderLine: FC<PlaceholderLineProps> = (props) => {
  const { className, length, children, forwardedRef, ...placeholderLineProps } = props;

  return createElement(
    'div',
    { ref: forwardedRef, className: classNames('line', length, className), ...placeholderLineProps },
    children,
  );
};

PlaceholderLine.displayName = 'PlaceholderLine';
PlaceholderLine.defaultProps = placeholderLineDefaultProps;

export default PlaceholderLine;
